<template>
    <el-card class="my-20px">
        <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
    </el-card>
    <el-card>
        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange" @sort-change="sortMethod">
            <template #isMonthMode>
                <el-table-column label="月单模式" width="120">
                    <template #default="scope">
                        <span>{{ scope.row.insureModes.join('，') }}</span>
                    </template>
                </el-table-column>
            </template>
            <template #insurCompanyType>
                <el-table-column label="保司" width="120">
                    <template #default="scope">
                        <!-- <span v-if="scope.row.insurCompanyXdc" class="mg-r-5">现代财</span>
                        <span v-if="scope.row.insurCompanyYg" class="mg-r-5">阳光保险</span>
                        <span v-if="scope.row.insurCompanyZgrs">中国人寿</span> -->
                        <span>{{ scope.row.insurCompanyTypes.join('，') }}</span>
                    </template>
                </el-table-column>
            </template>
            <!-- <template #settings>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="toDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </template> -->
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, computed, onMounted, onActivated } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getdepartmentapi } from '@/api/api.ts'
import { getPolicyList, getInsuranceCompany, getInsureMode } from '@/api/dashboard/longTerm.ts'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const startDate = dayjs().format('YYYY-MM')

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            }, 
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
        isMonthMode: {
            name: '月单模式',
            prop: 'isMonthMode',
            value: '',
            placeholder: '请选择月单模式',
            type: 'select',
            // 0:灵活,1;月保单,2即时生效 null全部
            options: [
                {
                    dictLabel: '灵活',
                    dictValue: 0
                },
                {
                    dictLabel: '月保单',
                    dictValue: 1
                },
                {
                    dictLabel: '即时生效',
                    dictValue: 2
                }
            ],
            defaultAttrs: {
                label: 'dictLabel',
                value: 'dictValue'
            },
            handleFocus: (item) => {
                // if(item.options?.length) return
                // getInsureMode({}).then(res => {
                //     item.options = res
                // })
            },
            handleChange: (item) => {
            }
        },
        insurCompanyType: {
            name: '保司',
            prop: 'insurCompanyType',
            value: '',
            placeholder: '请选择保司 ',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'name',
                value: 'insurCompany'
            },
            handleFocus: (item) => {
                if (item.options.length) return
                getInsuranceCompany({}).then(res => {
                    item.options = res
                })
            },
            handleChange: (item) => {
            }
        },
        insureMonth: {
            name: '保单日期',
            prop: 'insureMonth',
            value: startDate,
            initValue: startDate,
            placeholder: '请选择保单日期',
            type: 'date',
            dateType: 'month',
            valueFormat: 'YYYY-MM',
            noClear: true,
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            }
        },
        searchText: {
            name: '保单搜索',
            prop: 'searchText',
            value: '',
            placeholder: '请输入客户名称/负责人',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '新增行业',
        //     click: () => {
        //         addType.value = 'add'
        //         showAdd.value = true
        //         curItem.value = {}
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
    },
    {
        label: '商务负责人',
        prop: 'salesName',
    },
    {
        label: '所属分组',
        prop: 'deptName',
    },
    {
        label: '保司',
        prop: 'insurCompanyType',
    },
    {
        label: '月单模式',
        prop: 'isMonthMode',
    },
    {
        label: '业绩保费',
        prop: 'countEnsureFee',
        prefix: '¥',
        style: {
            color: '#FF7642'
        }
    },
    {
        label: '当前在保',
        prop: 'ensureCount',
        // sortable: 'customer'
    },
])

const sortOrder = ref('')
const tableData = ref([])

const sortMethod = ({ prop, order }) => {
    switch (prop) {
        case 'countEnsureFee':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 1 : 0
            }
            break
        case 'ensureCount':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 3 : 2
            }
            break
        case 'dueDate':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 5 : 4
            }
            break
    }
    getData()
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const toDetail = () => {
    console.log(2222)
}
// 保司名字
const insureCompanyName = computed(() => {
    return (row) => {
        const map = {

        }
        return ''
    }
})
// 月单模式名字
const monthModeName = computed(() => {
    return (type) => {
        const cur = filterData.value.list.isMonthMode.options.find(i => i.value === type)
        return cur?.label ?? ''
    }
})

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (filterData.value.list[key].prop === 'date') {
            query.startTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[0] : ''
            query.endTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[1] : ''
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const getData = () => {
    getPolicyList({
        ...createQuery(),
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
        sortOrder: sortOrder.value
    }).then(async res => {
        tableData.value = res.list
        pageInfo.value.total = res.total
        const companyList = []
        let monthModeList = []
        if (filterData.value.list.insurCompanyType.options?.length) {
            monthModeList = filterData.value.list.insurCompanyType.options
        } else {
            monthModeList = await getInsuranceCompany({})
            filterData.value.list.insurCompanyType.options = monthModeList
        }

        if (filterData.value.list.isMonthMode.options?.length) {
            monthModeList = filterData.value.list.isMonthMode.options
        } else {
            monthModeList = await getInsureMode({})
            filterData.value.list.isMonthMode.options = monthModeList
        }

        tableData.value.forEach(i => {
            const cur = companyList.find(c => c.insurCompany === i.insureCompanyType)
            i.insureCompanyName = ''
            if (cur) {
                i.insureCompanyName = cur.name
            }
            const curMode = monthModeList.find(c => c.type === i.isMonthMode)
            i.monthModeName = ''
            if (curMode && i.isMonthMode) {
                i.monthModeName = curMode.name
            }
        })
    })
}

onMounted(() => {
    getData()
})
onActivated(() => {
    getData()
})
</script>
<style lang="scss" scoped></style>